<template>
	<!-- Hello World! -->
	<div class="rcon1">
		<div class="yuan">
			<div class="y">1</div>
			<div class="inc">第一步</div>
		</div>
		<div class="yuan" @tap="goTo2">
			<div class="y">2</div>
			<div class="inc">第二步</div>
		</div>
		<div class="yuan" @tap="goTo3">
			<div class="y">3</div>
			<div class="inc">第三步</div>
		</div>
	</div>
	<div class="rebk">
		<div class="sel">
			1.突发事件类型选择（单选）
		</div>
		<div class="iconcon">
			<div
				class="icon" 
				v-for="item in iconList" 
				:key="item.id"  
				@click="selectItem(item.id)"
				:class="{ active: selectedId === item.id }"
				>
				<image :src="item.imgUrl" class="pic"></image>
				<div class="word">{{ item.name }}</div>
				<div class="select-btn" :class="{ active: selectedId === item.id }">
					<image src="/static/report/selected.png" class="select-img" v-if="selectedId === item.id"></image>
				</div>
			</div>
		</div>
		<div class="yncon">
			<div class="w1">
				是否报送心理健康中心
			</div>
			
			<div class="bt" @click="selectMentalHealth(true)":class="{ active: mentalHealth === true }">
				<div class="w2">是</div>
			</div>
			<div class="bt" @click="selectMentalHealth(false)" :class="{ active: mentalHealth === false }">
				<div class="w2">否</div>
			</div>
		</div>
<!-- 		<div class="qita"></div> -->
		<div class="submit-btn" @click="submitForm">
			<div class="word2">下一步</div>
		</div>
	</div>
</template>

<script>
	// export default
	// {
	// 	methods: 
	// 	{
	// 		goTo2() 
	// 		{
	// 			console.log('第二步被点击了！！！');
	// 			// 补充页面跳转代码
	// 			uni.navigateTo({url: '/pages/report/report2'});
	// 		}
	// 	}
	// }
	export default {
		data() {
		return {
	      // 存储所有选项的数据
			iconList:
			[
				{ id: 1, name: "群体事件", imgUrl: "/static/report/r1.png" },
				{ id: 2, name: "重大疾病", imgUrl: "/static/report/r2.png" },
				{ id: 3, name: "自杀", imgUrl: "/static/report/r3.png" },
				{ id: 4, name: "失踪", imgUrl: "/static/report/r4.png" },
				{ id: 5, name: "诈骗", imgUrl: "/static/report/r5.png" },
				{ id: 6, name: "打架斗殴", imgUrl: "/static/report/r6.png" },
				{ id: 7, name: "意外伤害", imgUrl: "/static/report/r7.png" },
				{ id: 8, name: "偷盗", imgUrl: "/static/report/r8.png" },
				{ id: 9, name: "火灾", imgUrl: "/static/report/r9.png" },
				{ id: 10, name: "交通事故", imgUrl: "/static/report/r10.png" },
				{ id: 11, name: "心理问题", imgUrl: "/static/report/r11.png" },
				{ id: 12, name: "传染性疾病", imgUrl: "/static/report/r12.png" },
				{ id: 13, name: "网络舆情", imgUrl: "/static/report/r13.png" },
				{ id: 14, name: "其他", imgUrl: "/static/report/r14.png" },
			],
	      // 新增：用于记录选中项的ID
			selectedId: null,
	      // 新增：用于记录是否报送心理健康中心的选择
			mentalHealth: null
	    };
	  },
	  // 新增：添加methods对象，包含所需方法
			methods: {
				goTo2() {
					console.log('第二步被点击了！！！');
					uni.navigateTo({url: '/pages/report/report2'});
					},
				goTo3() {
					console.log('第三步被点击了！！！');
					uni.navigateTo({url: '/pages/report/report3'});
					},
	    // 处理选项点击事件，记录选中的ID
				selectItem(id){this.selectedId = id;},
	    // 处理是否报送心理健康中心的选择
			selectMentalHealth(type) {this.mentalHealth = type;},
	    // 提交表单的方法
			submitForm() {
	      // 验证是否选择了事件类型
			if (!this.selectedId) 
			{
				uni.showToast({
				title: '请选择事件类型',
				icon: 'none'
				});
	        return;
			}
	      // 验证是否选择了是否报送
			if (this.mentalHealth === null) {
				uni.showToast({
				title: '请选择是否报送心理健康中心',
				icon: 'none'
	        });
	        return;
	      }
	      // 验证通过后可以跳转到下一步
	      uni.navigateTo({
	        url: '/pages/report/report2' 
});
	    }
	  }
	};
</script>


<style>
	.word2
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 30rpx;
		text-align: left;
		color: #fff;
	}
	.submit-btn
	{
		display: flex;
		justify-content: center;
		align-items: center; /* 内部图标居中 */
		width: 688rpx;
		height: 88rpx;
		margin-left: 20rpx;
		border-radius: 25rpx;
		background: #276eff;
		box-shadow: 0 4rpx 8rpx #e6e6e64d;	
	}
	/* 在原有 .bt 和 .w2 样式下方添加 */
	.bt.active {
	  background-color: #276eff; /* 选中时的蓝色背景 */
	}
	
	.bt.active .w2 {
	  color: #fff; /* 选中时文字变白 */
	}
	
	/* 可选：添加点击反馈 */
	.bt:active {
	  transform: scale(0.98);
	}
	.select-btn {
	  position: absolute; /* 绝对定位，不影响原有图片 */
	  top: -10rpx; /* 定位到容器右上角外侧 */
	  right: -10rpx;
	  width: 40rpx;
	  height: 40rpx;
	  background: #276eff; /* 蓝色背景 */
	  border-radius: 50%; /* 圆形 */
	  display: none; /* 默认隐藏 */
	  justify-content: center;
	  align-items: center; /* 内部图标居中 */
	}
	.icon.active .select-btn {
	  display: flex;
	}
	
	/* 选中图标的样式 */
	.select-img {
	  width: 24rpx;
	  height: 24rpx;
	}
	
	/* 确保选中状态下原图片不被影响 */
	.icon.active .pic {
	  /* 保持原图片尺寸和位置 */
	  width: 88rpx;
	  height: 88rpx;
	  margin-left: 26rpx;
	  margin-top: 32rpx;
	}
	.w2
	{
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 28rpx;
		/* text-align: left; */
		color: #276eff;
	}
	.bt
	{
			display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		width: 160rpx;
		height: 64rpx;
		margin-left: 10rpx;
		border-radius: 32rpx;
		background: #fff;
		border: 2rpx solid #276eff;
	}
	.w1
	{
/* 		margin-top: 44rpx;
		margin-left: 34rpx; */
		margin-left: 20rpx; 

		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 28rpx;
		
		color: #1a1a1a;
		opacity: 0.77;
	}
	.yncon
	{
		margin-left: 12rpx;
		margin-top: 20rpx;
		width: 688rpx;
		height: 126rpx;
		border-radius: 12rpx;
		background: #fff;
		box-shadow: 0 4rpx 8rpx #e6e6e64d;
		padding: 20rpx; 
		/* 开启Flex布局，方便文字垂直居中 */
		display: flex;
		align-items: center; 
	}
	.rebk
	{
		width: 750rpx;
		height: 2000rpx;
		background: #f2f4f7;
	}
	.word
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		margin-top: 58rpx;
		margin-left: 42rpx;
		font-size: 28rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.pic
	{
		margin-left: 26rpx;
		margin-top: 32rpx;
		width: 88rpx;
		height: 88rpx;
		background: transparent;
		border-radius: 50%;
	}
	.icon
	{
		overflow: visible; /* 新增：防止图片被容器裁剪 */
		position: relative; /* 新增：让选中图标基于容器定位 */
		display: flex;
		width: 330rpx;
		height: 150rpx;
		background: white;
		margin-top: 16rpx;
		margin-left: 32rpx;
		filter: drop-shadow(0 0 0 #00000014);
	}
	.sel
	{
		margin-top: 16rpx;
		margin-left: 52rpx;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 32rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.iconcon
	{
		display: flex;
		flex-wrap: wrap; /* 开启自动换行，超出一行时换行 */
		justify-content: flex-start; /* 水平方向从左到右排列 */
	}
	.rcon1
	{
		display: flex;
		justify-content: space-around; /* 三个步骤水平均匀分布 */
		align-items: center; /* 垂直居中 */
		width: 750rpx;
		height: 164rpx;
		background: #276EFF;
		position: relative; /* 用于连接线定位 */
	}
	.yuan
	{
		width: 60rpx;
		height: 60rpx;
		background: #fff;
		border: 2rpx solid #fff;
		border-radius: 50%;
	}
	.inc
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 20rpx;
		text-align: center;
		color: #fff;
	}
	.y
	{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #fff;
		border: 2rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #276eff;
		font-weight: bold;
		z-index: 1; /* 确保圆在连接线上方 */
	}

</style>	